import React, { useState, useEffect, useRef } from "react";
import { Button, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
export default function UpLoad() {
    const fileState = useRef();
    const [uploadFiles, setUploadFiles] = useState([]);
    const updateFiles = (function () {
        let fileList;
        return function (list, setState) {
            if (!fileList) {
                fileList = list;
                setState && setState(list);
            }
            return {
                fileList,
                reset() {
                    fileList = false;
                }
            };
        };
    })();

    function beforeUpload(_, fileList) {
        fileState.current = updateFiles(fileList, setUploadFiles);
        return false;
    }
    const customRequest = () => {
        console.log("自定义上传", uploadFiles);
    };

    useEffect(() => {
        if (uploadFiles.length > 0) {
            customRequest();
            fileState.current.reset();
        }
    }, [uploadFiles]);
    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <h2>Start editing to see some magic happen!</h2>
            <Upload
                listType="picture"
                maxCount={3}
                multiple
                beforeUpload={beforeUpload}
            >
                <Button>Upload (Max: 3)</Button>
            </Upload>
        </div>
    );
}
